<template>
  <div class="container">

    <!-- 面包屑导航 -->
<!--    <navbar></navbar>-->
    <div class="content page-title">
      <h2>用户运营看板</h2>
    </div>
    <div class="content search-content">
      <search-com type="user" @outputSearchData="receiveSearchData" @searchBasic="getStatistics($event)"></search-com>
    </div>
    <div class="content" v-loading="baseData.loading">
      <!-- <h3 class="card-title">基础数据</h3> -->
      <div class="base-data-list">
        <template class="base-data-item" v-for="(item, index) in baseData.list">
          <basic-data :basicDataItem="item" :basicDataItemIndex="index" :key="index"></basic-data>
        </template>
      </div>
    </div>
    <div class="content table-content">
      <div class="table-content-item-side">
        <h3 class="card-title">
          <label>
            {{ orderAmountPlatform.title }}
<!--            <el-tooltip class="item" effect="dark" content="不含未提交及已关闭、审核不通过的订单数据" placement="top"><i class="el-icon-question"></i> </el-tooltip>-->
          </label>
          <div class="staff-button-list">
            <el-button size="small" @click="onDownload(orderAmountPlatform.type)" class="download-table"
                       icon="el-icon-download"></el-button>
          </div>
        </h3>
        <search-com-company v-bind:class="[{'user-form': currenRoutetName === 'user'}, 'search-company']" :type="orderAmountPlatform.type"
                            :dateArr="orderAmountPlatform.dateArr"
                            @outputSearchData="receiveSearchData"></search-com-company>
        <echarts-pie v-loading="orderAmountPlatform.loading" :config="orderAmountPlatform.config" :dataList="orderAmountPlatform.dataList"></echarts-pie>
      </div>
      <div class="table-content-item-side">
        <h3 class="card-title">
          <label>{{ layerProportion.title }}</label>
          <div class="staff-button-list">
            <el-button size="small" @click="onDownload(layerProportion.type)" class="download-table"
                       icon="el-icon-download"></el-button>
          </div>
        </h3>
        <search-com-company v-bind:class="[{'user-form': currenRoutetName === 'user'}, 'search-company']" :type="layerProportion.type"
                            :dateArr="layerProportion.dateArr"
                            @outputSearchData="receiveSearchData"></search-com-company>
        <echarts-pie v-loading="layerProportion.loading" :config="layerProportion.config" :dataList="layerProportion.dataList"></echarts-pie>
      </div>
      </div>

    <div sclass=""></div>

    <div class="content table-content">
      <div class="table-content-item-side">
        <h3 class="card-title"><label>{{ bronze.title }}</label></h3>
        <search-com-company v-bind:class="[{'user-form': currenRoutetName === 'user'}, 'search-company']" :type="bronze.type"
                            :dateArr="bronze.dateArr"
                            @outputSearchData="receiveSearchData"></search-com-company>
        <data-board-table v-loading="bronze.loading" :dataList="bronze.list" :config="bronze.config"
                          :sortObj="bronze.sortObj"></data-board-table>
        <div class="page" v-if="bronze.list.length > 0">
          <el-pagination
              background
              @size-change="onChangePreferencePageBronze"
              @current-change="onPreferenceChangeSizeBronze"
              :current-page="bronze.page.pageNo"
              :page-sizes="[3, 5, 10, 20, 50]"
              :page-size="bronze.page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="bronze.page.totalNum"
          >
          </el-pagination>
        </div>
      </div>

      <div class="table-content-item-side">
        <h3 class="card-title"><label>{{ silver.title }}</label></h3>
        <search-com-company v-bind:class="[{'user-form': currenRoutetName === 'user'}, 'search-company']" :type="silver.type"
                            :dateArr="silver.dateArr"
                            @outputSearchData="receiveSearchData"></search-com-company>
        <data-board-table v-loading="silver.loading" :dataList="silver.list" :config="silver.config"
                          :sortObj="silver.sortObj"></data-board-table>
        <div class="page" v-if="silver.list.length > 0">
          <el-pagination
              background
              @size-change="onChangePreferencePageSilver"
              @current-change="onPreferenceChangeSizeSilver"
              :current-page="silver.page.pageNo"
              :page-sizes="[3, 5, 10, 20, 50]"
              :page-size="silver.page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="silver.page.totalNum"
          >
          </el-pagination>
        </div>
      </div>

      <div class="table-content-item-side">
        <h3 class="card-title"><label>{{ gold.title }}</label></h3>
        <search-com-company v-bind:class="[{'user-form': currenRoutetName === 'user'}, 'search-company']" :type="gold.type"
                            :dateArr="gold.dateArr"
                            @outputSearchData="receiveSearchData"></search-com-company>
        <data-board-table v-loading="gold.loading" :dataList="gold.list" :config="gold.config"
                          :sortObj="gold.sortObj"></data-board-table>
        <div class="page" v-if="gold.list.length > 0">
          <el-pagination
              background
              @size-change="onChangePreferencePageGold"
              @current-change="onPreferenceChangeSizeGold"
              :current-page="gold.page.pageNo"
              :page-sizes="[3, 5, 10, 20, 50]"
              :page-size="gold.page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="gold.page.totalNum"
          >
          </el-pagination>
        </div>
      </div>

      <div class="table-content-item-side">
        <h3 class="card-title"><label>{{ recommend.title }}</label></h3>
        <search-com-company v-bind:class="[{'user-form': currenRoutetName === 'user'}, 'search-company']" :type="recommend.type"
                            :dateArr="recommend.dateArr"
                            @outputSearchData="receiveSearchData"></search-com-company>
        <data-board-table v-loading="recommend.loading" :dataList="recommend.list" :config="recommend.config"
                          :sortObj="recommend.sortObj"></data-board-table>

      </div>

    </div>

    <div class="content achievement" v-loading="renewRankingList.loading">
      <h3 class="card-title"><label>客户拉新排行榜</label></h3>
      <search-com-company v-bind:class="[{'user-form': currenRoutetName === 'user'}, 'search-company']" :type="renewRankingList.type"
                          :dateArr="renewRankingList.dateArr"
                          @outputSearchData="receiveSearchData"></search-com-company>
      <data-board-table :dataList="renewRankingList.list" :config="renewRankingList.config"
                        :sortObj="renewRankingList.sortObj" @tableShowDetail="showDetail"></data-board-table>
      <div class="page" v-if="renewRankingList.list.length > 0">
        <el-pagination
            background
            @size-change="onChangePreferencePageRenewRanking"
            @current-change="onPreferenceChangeSizeRenewRanking"
            :current-page="renewRankingList.page.pageNo"
            :page-sizes="[3, 5, 10, 20, 50]"
            :page-size="renewRankingList.page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="renewRankingList.page.totalNum"
        >
        </el-pagination>
      </div>
    </div>

    <!--========================== el-dialog =================================-->
    <el-dialog
        :title="dialog.title"
        :visible.sync="dialog.visible"
        :width="dialog.width"
        :append-to-body="true"
    >
      <template slot="title" v-if="dialog.subTitle">
        <div class="dialog-slot-title"><label>{{ dialog.title }}</label><span>( {{ staffTableAchievementDetail.month }} )</span>
        </div>
      </template>
      <!-- 员工业绩统计-->
      <template v-if="dialog.type === 'performanceStatistics'">
        <data-board-table v-loading="loading" :dataList="staffTableAchievementDetail.page.list"
                          :config="staffTableAchievementDetail.list"
                          :sortObj="staffTableAchievementDetail.sortObj"></data-board-table>
        <!-- 员工业绩统计 分页start -->
<!--        <div class="page" v-if="staffTableAchievementDetail.page.totalNum >= 10">-->
        <div class="page">
          <el-pagination
              background
              @size-change="staffDetailSizeChange"
              @current-change="staffDetailCurrentChange"
              :current-page="staffTableAchievementDetail.page.pageNo"
              :page-sizes="[3, 5, 10, 20, 50]"
              :page-size="staffTableAchievementDetail.page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="staffTableAchievementDetail.page.totalNum"
          >
          </el-pagination>
        </div>
        <!-- 员工业绩统计 分页end -->
        <el-button size="small" type="primary" plain class="performanceStatistics-download"
                   @click="onDownload('achievementDetail')">下载
        </el-button>
      </template>

    </el-dialog>
    <!--=========================== el-dialog end================================-->
  </div>
</template>

<script>
import navbar from '@/components/navbar.vue'
import SearchCom from './components/SearchCom.vue'
import SearchComCompany from './components/SearchComCompany.vue'
import BasicData from './components/BasicData.vue'
import TotalSales from './components/TotalSales.vue'
import DataBoardTable from './components/DataBoardTable.vue'
import EchartsPie from './components/EchartsPie.vue'
import Comparison from './components/Comparison.vue'
import TopSale from './components/TopSale.vue'
import dataBoardCommon from './mixins/dataBoardCommon'

import { getDateRange } from '@/utils/index.js'

export default {
  mixins: [dataBoardCommon],
  components: {
    navbar,
    SearchCom,
    SearchComCompany,
    BasicData,
    TotalSales,
    EchartsPie,
    DataBoardTable,
    Comparison,
    TopSale
  },
  data () {
    return {
      loading: false,
      basicDays: 1, // 基础数据默认天数
      page: { list: [], pageNo: 1, pageSize: 8, totalNum: 0, currentPage: 1 },
      baseData: {
        loading: false,
        orgCode: '', // 公司部门
        dateArr: [], // 日期
        userId: '', // 当前用户ID
        list: [
          { title: '销售总额', dateArr: ['2022-06-08', '2022-06-10'], totalNumber: '0', increase: 0.00 },
          { title: '订单数', dateArr: ['2022-06-08', '2022-06-10'], totalNumber: '0', increase: 0.00 },
          { title: '货到付款订单数', dateArr: ['2022-06-02', '2022-06-02'], totalNumber: '0', increase: 0.00 },
          { title: '签收率', dateArr: ['2022-06-08', '2022-06-10'], totalNumber: '0.00', increase: 0.00 }
        ]
      },
      imageArr: [], // 列表有图片时使用
      orderAmountPlatform: { // 各平台客户来源占比
        loading: false,
        title: '各平台客户来源占比',
        type: 'platformProportion',
        orgCode: '', // 公司部门
        dateArr: [], // 日期
        config: {
          className: 'orderAmountPlatform',
          radius: '55%',
          color: ['#4168e7', '#14d8cb', '#1ccf79', '#ffd83b', '#f65570', '#9850fc', '#73c0de', '#5470c6', '#91cc75', '#fac858', '#ee6666']
        },
        dataList: [
          { value: 422, name: '360元以上' },
          { value: 335, name: '315-360元' },
          { value: 310, name: '270-315元' },
          { value: 265, name: '220-270元' },
          { value: 215, name: '180-220元' },
          { value: 152, name: '0-180元' }
        ]
      },
      layerProportion: { // 各等级占比
        title: '各等级占比',
        loading: false,
        type: 'userlayerProportion',
        orgCode: '', // 公司部门
        dateArr: [], // 日期
        config: {
          className: 'layerProportion',
          radius: ['40%', '60%'],
          color: ['#4168e7', '#14d8cb', '#1ccf79', '#ffd83b', '#f65570', '#9850fc']
        },
        dataList: [
          { value: 422, name: '360元以上' },
          { value: 335, name: '315-360元' },
          { value: 310, name: '270-315元' },
          { value: 265, name: '220-270元' },
          { value: 215, name: '180-220元' },
          { value: 152, name: '0-180元' }
        ]
      },
      preferenceList: ['bronze', 'silver', 'gold', 'recommend', 'renewRankingList'], // 推荐产品偏好 - 铜、银、金、GMV 客户拉新排行榜
      bronze: { // 青铜会员推荐产品偏好
        loading: false,
        title: '青铜会员推荐产品偏好',
        type: 'bronze',
        orgCode: '', // 公司部门
        dateArr: [], // 日期
        page: { list: [], pageNo: 1, pageSize: 10, totalNum: 0, currentPage: 1 },
        sortObj: { prop: 'buyCount', order: 'descending' }, // 排序
        config: [
          { type: 'index', label: '序号', width: 60 },
          { prop: 'categoryName', label: '商品一级类目' },
          { prop: 'visitCount', label: '浏览商品详情页（次）', sortable: true, width: 160 },
          { prop: 'orderCount', label: '支付订单（次）', sortable: true },
          { prop: 'orderRate', label: '购买率（%）', sortable: true }
        ],
        list: []
      },
      silver: { // 白银会员推荐产品偏好
        loading: false,
        title: '白银会员推荐产品偏好',
        type: 'bronze',
        orgCode: '', // 公司部门
        dateArr: [], // 日期
        page: { list: [], pageNo: 1, pageSize: 10, totalNum: 0, currentPage: 1 },
        sortObj: { prop: 'buyCount', order: 'descending' }, // 排序
        config: [
          { type: 'index', label: '序号', width: 60 },
          { prop: 'categoryName', label: '商品一级类目' },
          { prop: 'visitCount', label: '浏览商品详情页（次）', sortable: true, width: 160 },
          { prop: 'orderCount', label: '支付订单（次）', sortable: true },
          { prop: 'orderRate', label: '购买率（%）', sortable: true }
        ],
        list: []
      },
      gold: { // 黄金会员推荐产品偏好
        loading: false,
        title: '黄金会员推荐产品偏好',
        type: 'bronze',
        orgCode: '', // 公司部门
        dateArr: [], // 日期
        page: { list: [], pageNo: 1, pageSize: 10, totalNum: 0, currentPage: 1 },
        sortObj: { prop: 'buyCount', order: 'descending' }, // 排序
        config: [
          { type: 'index', label: '序号', width: 60 },
          { prop: 'categoryName', label: '商品一级类目' },
          { prop: 'visitCount', label: '浏览商品详情页（次）', sortable: true, width: 160 },
          { prop: 'orderCount', label: '支付订单（次）', sortable: true },
          { prop: 'orderRate', label: '购买率（%）', sortable: true }
        ],
        list: []
      },
      recommend: { // 各等级推荐用户GMV贡献
        loading: false,
        title: '各等级推荐用户GMV贡献',
        type: 'recommend',
        orgCode: '', // 公司部门
        dateArr: [], // 日期
        page: { list: [], pageNo: 1, pageSize: 10, totalNum: 0, currentPage: 1 },
        sortObj: { prop: 'buyCount', order: 'descending' }, // 排序
        config: [
          { type: 'index', label: '序号', width: 60 },
          { prop: 'vipName', label: '等级' },
          { prop: 'gmv', label: 'GMV', sortable: true, width: 160 },
          { prop: 'orderCount', label: '订单量', sortable: true },
          { prop: 'orderPersonCount', label: '下单人数', sortable: true }
        ],
        list: []
      },
      renewRankingList: { // 客户拉新排行榜
        loading: false,
        title: '客户拉新排行榜',
        type: 'renewRankingList',
        orgCode: '', // 公司部门
        dateArr: [], // 日期
        page: { list: [], pageNo: 1, pageSize: 10, totalNum: 0, currentPage: 1, orderBy: '', ascFlag: 0 }, // orderBy 排序字段   ascFlag 是否升序 0降序；1升序
        sortObj: { prop: 'buyCount', order: 'descending' }, // 排序
        config: [
          { prop: 'sortNum', label: '排名', width: 60 },
          { prop: 'customerName', label: '姓名', sortable: true, width: 160 },
          { prop: 'totalSaleAmount', label: '总销售额', sortable: true },
          { prop: 'totalSaleOrderCount', label: '总订单数', sortable: true },
          { prop: 'vipSaleAmount', label: '推荐身份金额', sortable: true, width: 160 },
          { prop: 'vipSalePersonCount', label: '推荐人数', sortable: true },
          { prop: 'repeatSaleAmount', label: '复购金额', sortable: true },
          { prop: 'repeatSaleOrderCount', label: '复购数', sortable: true, width: 160 },
          { prop: 'giftSaleAmount', label: '礼包金额', sortable: true },
          { prop: 'giftSaleOrderCount', label: '礼包数', sortable: true },
          { prop: 'commission', label: '佣金', sortable: true }
        ],
        list: []
      },
      screenWidth: document.body.clientWidth,
      currenRoutetName: '',
      rQuery: {}
    }
  },
  mounted () {
    this.$nextTick(_ => {
      console.log('mounted this.$nextTick')
    })
  },
  created () {
    const currenRoutet = this.$route
    this.currenRoutetName = currenRoutet.name
    this.rQuery = currenRoutet.query
    // 获取默认数据
    this.fetchDefaultData()
  },
  beforeRouteLeave (to, form, next) {
    document.onkeydown = null
    next()
  },
  activated () {
    // this.brandSelect();
    // this.brandSelectBox();
  },
  watch: {
    /* 监听*/
    screenWidth (val) {
      this.screenWidth = val
      console.log('this.screenWidth', this.screenWidth)
      this.windowOnresize()
    }
  },
  methods: {
    // 获取默认数据
    fetchDefaultData () {
      this.getPlatformStatisticsCustomer(true) // 各平台客户来源占比
      this.getMatrixUserVipData(true) // 各等级占比
      this.getStatistics(true) // 首页销售数据统计

      // 推荐产品偏好 - 铜、银、金、GMV
      this.preferenceList.forEach(type => {
        this.getMatrixPreferenceData(type, true)
      })
    },
    // 各平台客户来源占比
    getPlatformStatisticsCustomer (isDefault, dateArr, orgCodeArrStr) {
      // console.log(isDefault, dateArr, orgCodeArrStr)
      if (isDefault || dateArr) {
        this.orderAmountPlatform.loading = true
      } else {
        return
      }
      this.orderAmountPlatform.orgCode = orgCodeArrStr || this.userInfo.orgCode
      let days = 30
      if (isDefault) { // 默认
        this.orderAmountPlatform.dateArr = this.defaultDateTime(days)
      } else { // 选择
        this.orderAmountPlatform.dateArr = this.chooseDateTime(dateArr)
        if (this.orderAmountPlatform.dateArr[0].indexOf('undefined') > -1) {
          this.orderAmountPlatform.dateArr = this.defaultDateTime(days)
        }
        days = this.orderAmountPlatform.dateArr[2]
      }
      const params = {
        pageNo: 1, pageSize: 999,
        startTime: this.orderAmountPlatform.dateArr[0],
        endTime: this.orderAmountPlatform.dateArr[1]
      }
      this.$api.matrixUserPlatformData(params).then((res) => {
        this.orderAmountPlatform.loading = false
        const resData = res.data
        if (resData.length === 0) {
          return this.$message.warning('没有各平台客户来源占比相关数据！')
        }
        resData.forEach(item => {
          item.name = item.platformName
          item.value = item.peopleNum
        })
        // console.log(resData)
        this.orderAmountPlatform.dataList = resData
      }).catch((err) => {
        this.orderAmountPlatform.loading = false
        console.log(err)
      })
    },
    // 各等级占比
    getMatrixUserVipData (isDefault, dateArr, orgCodeArrStr) {
      // console.log(isDefault, dateArr, orgCodeArrStr)
      if (isDefault || dateArr) {
        this.layerProportion.loading = true
      } else {
        return
      }
      this.layerProportion.orgCode = orgCodeArrStr || this.userInfo.orgCode
      let days = 30
      if (isDefault) { // 默认
        this.layerProportion.dateArr = this.defaultDateTime(days)
      } else { // 选择
        this.layerProportion.dateArr = this.chooseDateTime(dateArr)
        if (this.layerProportion.dateArr[0].indexOf('undefined') > -1) {
          this.layerProportion.dateArr = this.defaultDateTime(days)
        }
        days = this.layerProportion.dateArr[2]
      }
      const params = {
        pageNo: 1, pageSize: 999,
        startTime: this.layerProportion.dateArr[0],
        endTime: this.layerProportion.dateArr[1]
      }
      this.$api.matrixUserVipData(params).then((res) => {
        this.layerProportion.loading = false
        const resData = res.data
        if (resData.length === 0) {
          return this.$message.warning('没有各等级占比相关数据！')
        }
        resData.forEach(item => {
          // item.name = item.vipName + ' ' + item.rate + '%'
          item.name = item.vipName
          item.value = item.peopleNum
        })
        // console.log(resData)
        this.layerProportion.dataList = resData
      }).catch((err) => {
        this.layerProportion.loading = false
        console.log(err)
      })
    },

    /**
     * 获取偏好数据 铜、银、金、GMV
     * @param type
     * @param isDefault
     * @param dateArr
     * @param orgCodeArrStr
     */
    getMatrixPreferenceData (type, isDefault, dateArr, orgCodeArrStr) {
      // console.log(type, isDefault, dateArr, orgCodeArrStr)
      const dataType = type || 'bronze'
      // console.log(isDefault, dateArr, orgCodeArrStr)
      if (isDefault || dateArr) {
        this[dataType].loading = true
      } else {
        return
      }
      this[dataType].orgCode = orgCodeArrStr || this.userInfo.orgCode
      let days = 30
      if (isDefault) { // 默认
        this[dataType].dateArr = this.defaultDateTime(days)
      } else { // 选择
        this[dataType].dateArr = this.chooseDateTime(dateArr)
        if (this[dataType].dateArr[0].indexOf('undefined') > -1) {
          this[dataType].dateArr = this.defaultDateTime(days)
        }
        days = this[dataType].dateArr[2]
        this[dataType].page.pageNo = 1
        this[dataType].page.currentPage = 1
      }
      const params = {
        pageNo: 1, pageSize: 999,
        startTime: this[dataType].dateArr[0],
        endTime: this[dataType].dateArr[1],
        vipId: 0 // 1黄金 2白银 3青铜
      }
      let modelFun
      switch (type) {
        case 'bronze': // 铜
          params.vipId = 3
          modelFun = this.$api.matrixUserVipGoodsPreferenceData
          break
        case 'silver': // 银
          params.vipId = 2
          modelFun = this.$api.matrixUserVipGoodsPreferenceData
          break
        case 'gold': // 金
          params.vipId = 1
          modelFun = this.$api.matrixUserVipGoodsPreferenceData
          break
        case 'recommend': // GMV
          delete params.vipId
          modelFun = this.$api.matrixUserGMV
          break
        case 'renewRankingList': // 客户拉新排行榜
          delete params.vipId
          modelFun = this.$api.matrixUserRecommendRankingList
          break
        default:
          return console.log('type 没值')
      }
      modelFun(params).then((res) => {
        this[dataType].loading = false
        const resData = res.data
        if (resData.length === 0) {
          return this.$message.warning('没有各等级占比相关数据！')
        }
        if (dataType === 'recommend') {
          this[dataType].list = resData
          console.log(dataType, this[dataType].list)
        } else {
          this[dataType].list = resData.list
          this[dataType].page.totalNum = resData.totalNum
          console.log(dataType, this[dataType].list)
        }
        // console.log(resData)
      }).catch((err) => {
        this[dataType].loading = false
        console.log(err)
      })
    },
    // ****************** 获取偏好数据 铜 翻页 ******************
    onChangePreferencePageBronze (currentChange) {
      this.bronze.page.pageNo = currentChange
      this.getMatrixPreferenceData('bronze', false, this.bronze.dateArr, this.bronze.orgCode)
    },
    onPreferenceChangeSizeBronze (sizeChange) {
      this.bronze.page.pageNo = 1
      this.bronze.page.currentPage = 1
      this.bronze.page.pageSize = sizeChange
      this.getMatrixPreferenceData('bronze', false, this.bronze.dateArr, this.bronze.orgCode)
    },
    // ****************** 获取偏好数据 铜 end ******************

    // ****************** 获取偏好数据 银 翻页 ******************
    onChangePreferencePageSilver (currentChange) {
      this.silver.page.pageNo = currentChange
      this.getMatrixPreferenceData('silver', false, this.silver.dateArr, this.silver.orgCode)
    },
    onPreferenceChangeSizeSilver (sizeChange) {
      this.silver.page.pageNo = 1
      this.silver.page.currentPage = 1
      this.silver.page.pageSize = sizeChange
      this.getMatrixPreferenceData('silver', false, this.silver.dateArr, this.silver.orgCode)
    },
    // ****************** 获取偏好数据 银 翻页 end ******************

    // ****************** 获取偏好数据 金 翻页 ******************
    onChangePreferencePageGold (currentChange) {
      this.gold.page.pageNo = currentChange
      this.getMatrixPreferenceData('gold', false, this.gold.dateArr, this.gold.orgCode)
    },
    onPreferenceChangeSizeGold (sizeChange) {
      this.gold.page.pageNo = 1
      this.gold.page.currentPage = 1
      this.gold.page.pageSize = sizeChange
      this.getMatrixPreferenceData('gold', false, this.gold.dateArr, this.gold.orgCode)
    },
    // ****************** 获取偏好数据 金 翻页 end ******************

    // ****************** 获取偏好数据 GMV 翻页 ******************
    onChangePreferencePageRenewRanking (currentChange) {
      this.renewRankingList.page.pageNo = currentChange
      this.getMatrixPreferenceData('renewRankingList', false, this.renewRankingList.dateArr, this.renewRankingList.orgCode)
    },
    onPreferenceChangeSizeRenewRanking (sizeChange) {
      this.renewRankingList.page.pageNo = 1
      this.renewRankingList.page.currentPage = 1
      this.renewRankingList.page.pageSize = sizeChange
      this.getMatrixPreferenceData('renewRankingList', false, this.renewRankingList.dateArr, this.renewRankingList.orgCode)
    },
    // ****************** 获取偏好数据 GMV 翻页 end ******************

    // 首页销售数据统计
    getStatistics (isDefault) {
      this.baseData.loading = true
      // days 1 今天
      // days 1001 昨天
      // days 1070 过去七天
      // days 1071 本周
      // days 1031 本月
      // days 10000 自定义时段
      // debugger
      const days = this.basicDays
      if (isDefault || days === 1 || days === 1001) { // 默认 今天 昨天
        this.baseData.dateArr = this.defaultDateTime(days)
      } else if (days === 1071) { // 本周
        const dateRange = getDateRange('week')
        this.baseData.dateArr[0] = dateRange.startDate
        this.baseData.dateArr[1] = dateRange.enDate
        console.log('本周，日期范围', this.baseData.dateArr)
      } else if (days === 1031) { // 本月
        const dateRange = getDateRange('month')
        this.baseData.dateArr[0] = dateRange.startDate
        this.baseData.dateArr[1] = dateRange.enDate
        console.log('本月，日期范围', this.baseData.dateArr)
      } else { // 选择
        // console.log(this.baseData.dateArr)
        if (this.baseData.dateArr[0].indexOf('undefined') > -1) {
          if (days === 10000) {
            this.baseData.loading = false
            return this.$message.warning('请选择日期！')
          }
          this.baseData.dateArr = this.defaultDateTime(days)
        }
      }
      // debugger
      const tempOrgCode = this.baseData.orgCode
      if (tempOrgCode == 'undefined' || !tempOrgCode || !/[^\s]/.test(tempOrgCode)) {
        // 为空
        this.baseData.orgCode = this.userInfo.orgCode
      } else {
        // 不为空
        // console.log('有选择公司')
      }
      const params = {
        pageNo: 1, pageSize: 999,
        startTime: this.baseData.dateArr[0],
        endTime: this.baseData.dateArr[1]
        // orgCode: this.baseData.orgCode,
        // userId: isDefault ? '' : this.baseData.userId
      }
      this.$api.matrixUserBoardData(params).then((res) => {
        this.baseData.loading = false
        if (res.code == 0) {
          const resData = res.data
          const tempObj = { title: '用户数', dateArr: ['2023-01-01', '2023-02-02'], totalNumber: '0', increase: 0.00 }
          const tempArr = Array(4).fill({})
          for (let i = 0; i < tempArr.length; i++) {
            // tempArr[i] = Object.assign({}, JSON.parse(JSON.stringify(tempObj)))
            tempArr[i] = Object.assign({}, tempObj)
            // debugger
            switch (i) {
              case 0:
                tempArr[i].title = '平台累计访问用户数'
                if (resData.userVisitData) {
                  tempArr[i].dateArr[0] = resData.userVisitData.startDate
                  tempArr[i].dateArr[1] = resData.userVisitData.endDate
                  tempArr[i].totalNumber = resData.userVisitData.currentData
                  tempArr[i].increase = resData.userVisitData.ringRatioPercentage
                }
                break
              case 1:
                tempArr[i].title = '累计注册用户数'
                if (resData.userRegData) {
                  tempArr[i].dateArr[0] = resData.userRegData.startDate
                  tempArr[i].dateArr[1] = resData.userRegData.endDate
                  tempArr[i].totalNumber = resData.userRegData.currentData
                  tempArr[i].increase = resData.userRegData.ringRatioPercentage
                }
                break
              case 2:
                tempArr[i].title = '新注册用户数'
                if (resData.newUserData) {
                  tempArr[i].dateArr[0] = resData.newUserData.startDate
                  tempArr[i].dateArr[1] = resData.newUserData.endDate
                  tempArr[i].totalNumber = resData.newUserData.currentData
                  tempArr[i].increase = resData.newUserData.ringRatioPercentage
                }
                break
              case 3:
                tempArr[i].title = '老客拉新注册数'
                if (resData.oldUserData) {
                  tempArr[i].dateArr[0] = resData.oldUserData.startDate
                  tempArr[i].dateArr[1] = resData.oldUserData.endDate
                  tempArr[i].totalNumber = resData.oldUserData.currentData
                  tempArr[i].increase = resData.oldUserData.ringRatioPercentage
                }
                break
              default:
                console.log(i)
            }
          }
          // console.log(tempArr)
          tempArr.forEach(item => {
            item.dateArr[0] = item.dateArr[0].substring(0, 10)
            item.dateArr[1] = item.dateArr[1].substring(0, 10)

            item.totalNumber = `<label>${this.formatNumber(item.totalNumber, 0)}</label><span style="font-size: 25px;font-weight: 400;">人</span>`

            item.increaseNum = isNaN(Number(item.increase)) ? 0 : Number(item.increase)
            item.increase = this.formatNumber(item.increase, 0)

            // item.prevMonthIncreaseNum = isNaN(Number(item.prevMonthIncrease)) ? 0 : Number(item.prevMonthIncrease)
            // item.prevMonthIncrease = this.formatNumber(item.prevMonthIncrease, 0)
          })
          this.baseData.list = tempArr
        }
      }).catch((err) => {
        console.log(err)
        this.baseData.loading = false
      })
    },
    onDownload (type) {
      this.loading = true
      let downloadFun; let params = {}
      switch (type) {
        case 'trend': // 趋势
          console.log('趋势')
          break
        case 'platformProportion': // 员工排行榜
          console.log('各平台客户来源占比 - 下载')
          downloadFun = this.$api.matrixUserPlatformDat
          params = {
            pageNo: 1, pageSize: 999,
            startTime: this.orderAmountPlatform.dateArr[0],
            endTime: this.orderAmountPlatform.dateArr[1]
            // orgCode: this.orderAmountPlatform.orgCode
            // orgCode: 'DT374265477'
          }
          break
        case 'userlayerProportion': // 各等级占比
          console.log('各等级占比')
          downloadFun = this.$api.matrixUserExportVipData
          params = {
            pageNo: 1, pageSize: 999,
            startTime: this.layerProportion.dateArr[0],
            endTime: this.layerProportion.dateArr[1]
            // orgCode: this.orderAmountPlatform.orgCode
            // orgCode: 'DT374265477'
          }
          break
        case 'achievementDetail': // 近一年员工业绩 - 详细
          console.log('近一年员工业绩 - 详细')
          params = {
            orderTime: this.staffTableAchievementDetail.month
          }
          downloadFun = this.$api.selectEmployeeKpiExport
          break
        default:
          console.log('onDownload')
      }
      downloadFun(params).then((res) => {
        if (res.code === 0) {
          this.downloadlink(res.data)
        }
        this.loading = false
      }).catch((err) => {
        console.log(err)
        this.loading = false
      })
    },
    setElTable () { // 设置表格宽高
      const sWidth = this.screenWidth
      // console.log( sWidth )
      this.elTable.height = parseInt(sWidth / 3)
      /*
      if(sWidth > 1900){
        this.elTable.height = 800
      } else if (sWidth > 1600) {
        this.elTable.height = 800
      } else if (sWidth > 1200) {
        this.elTable.height = 600
      } else if (sWidth > 600) {
        this.elTable.height = 400
      }
      */
      // this.elTable.height = getScreenWidth
    }
  }
}
</script>

<style scoped lang="scss">
@import './assets/DataCoardCommon';

///deep/ .el-table th > .cell { text-align: unset; }
template {
  display: block;
}

h2 {
  position: relative;
  margin-bottom: 21px;
  padding-left: 11px;

  &:before {
    position: absolute;
    top: 4px;
    left: 0;
    display: inline-block;
    content: '';
    width: 4px;
    height: 17px;
    background-color: #2d7edf;
  }
}

.el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover {
  //background-color: #ecf5ff;
}

.dialog-slot-title {
  line-height: 24px;

  label {
    color: #333333;
    font-weight: bold;
    font-size: 18px;
    margin-right: 10px;
  }

  span {
    font-size: 14px;
    font-weight: 400;
    color: #666666;
  }
}

/deep/ .el-table__body-wrapper .el-table__row .el-table__cell:first-child .cell {
  //color: #4168E7;
}

.table-content{
  //background-color: #ffffff;
  margin-bottom:10px!important;
  float: unset;
  .table-content-item-side{
    background-color: #ffffff;
    padding: 10px;
    float: left;
    width: calc(50% - 25px);
    margin-bottom: 10px;
    &:nth-child(even){
      margin-left: 10px;
    }
  }
}

.sale-chart {
  .sale-chart-right {
    min-height: 557px;

    /deep/ .el-table__body-wrapper .el-table__row {
      &:first-child, &:nth-child(2), &:nth-child(3) {
        .el-table__cell:first-child .cell {
          color: #4168E7;
        }
      }
    }
    .el-pagination{
      text-align: center;
    }
  }
}

//近一年业绩
.achievement {
  .card-title {
    .staff-button-list {
      .el-button {
        margin-right: 10px;
      }
    }
  }

  ::v-deep.el-table th > .cell {
    text-align: unset;
  }

  ::v-deep.el-table .el-table__row td:first-child {
    text-align: left;
  }
}

.el-table__row {
  .el-table__cell {
    .cell {
      padding-left: 12px;
      padding-right: 12px;

      .el-image {
        width: 100px;
        height: 70px;
        overflow: hidden;

        /deep/ img {
          width: 100%;
          object-fit: cover;
        }
      }
    }
  }
}

//变化趋势
.sale-chart-left {
  .staff-button-list {
    .search-company {
      //width: 100% !important;
    }
  }
}

.page {
  text-align: right;
  width: 100%;
  //background: #f5f5f5;
  padding-right: 20px;
  //position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1000;
  margin-top: 10px;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}

:deep(.user-form .search-form .el-form-item) {
  max-width: 220px;
  min-width: 220px;
}
</style>
